<template>
    <div class="line1">
        <div :id="idName" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/bar';
    import 'echarts/lib/chart/line';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/toolbox';
    import 'echarts/lib/component/markPoint';
    import 'echarts/lib/component/tooltip';
    export default {
        mounted(){
            this.myChart = echarts.init(document.getElementById(this.idName));
            this.initData();
        },
        props: ['sevenDate', 'sevenDay', 'idName'],
        methods: {
            initData(){
                const colors = ['#3dc9cc', '#f5c941', '#ff5757'];
                const option = {
                    color: colors,
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['人数', '次数', '人均次数'],
                        y: 'top',
                        x: 'center',
                        padding:10
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: this.sevenDay,
                        axisLine:{
                            lineStyle:{
                                color: '#000000',
                                width: 1,
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333333'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'transparent'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#000000'
                            }
                        }
                    },
                    yAxis: [
                        {
                          type: 'value',
                          name: '数量',
                          min: 0,
                          position: 'left',
                          axisLine: {
                              lineStyle:{
                                  color: '#000000',
                                  width: 1,
                                  shadowBlur: 0,
                                  shadowOffsetX: 0,
                                  shadowOffsetY: 0
                              }
                          },
                          axisLabel: {
                              show: true,
                              textStyle: {
                                  color: '#333333'
                              },
                              formatter: '{value}'
                          },
                           splitLine: {
                               lineStyle: {
                                   color: '#dddddd'
                               }
                           },
                           axisTick: {
                               show: true,
                               lineStyle: {
                                   color: '#000000'
                               }
                           }
                        },
                        {
                          type: 'value',
                          name: '人均次数',
                          min: 0,
                          position: 'right',
                          axisLine: {
                              lineStyle:{
                                  color: '#000000',
                                  width: 1,
                                  shadowBlur: 0,
                                  shadowOffsetX: 0,
                                  shadowOffsetY: 0
                              }
                          },
                          axisLabel: {
                              show: true,
                              textStyle: {
                                  color: '#333333'
                              },
                              formatter: '{value}'
                          },
                           splitLine: {
                               lineStyle: {
                                   color: '#dddddd'
                               }
                           },
                           axisTick: {
                               show: true,
                               lineStyle: {
                                   color: '#000000'
                               }
                           }
                        },
                    ],
                    series: [
                        {
                            name:'人数',
                            type:'line',
                            data:this.sevenDate[0],
                            yAxisIndex: 1,
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 1,
                                        shadowBlur: 0,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                    }
                                },
                            }
                        },
                        {
                            name:'次数',
                            type:'line',
                            data:this.sevenDate[1],
                            yAxisIndex: 1,
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 1,
                                        shadowBlur: 0,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                    }
                                },
                            }
                        },
                        {
                            name:'人均次数',
                            type:'line',
                            data:this.sevenDate[2],
                            yAxisIndex: 1,
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 1,
                                        shadowBlur: 0,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                    }
                                },
                            }
                        }
                    ],
                    grid: {
                     x: 35,
                     y: 40,
                     x2: 35,
                     y2: 20
                    }
              };
                this.myChart.setOption(option);
            }
        },
        watch: {
            sevenDate: function (){
                this.initData()
            },
            sevenDay: function (){
                this.initData()
            }
        }
    }
</script>

<style lang="less" scoped>
    .line1{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
